<template>
    <div id="container">
    </div>
</template>

<script>
// 引入three
import * as Three from 'three'
import { OBJLoader } from 'three-obj-mtl-loader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import bus from '../../utils/bus.js'
export default {
  name: 'ThreeTest',
  data () {
    return {
      iscollapse: false,
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      light: null
    }
  },
  created (){
    // bus.$on('isCollapse',isCollapse => {
    //   this.iscollapse = isCollapse
    //   var container = document.getElementById("container")
    //   if(this.iscollapse === false) {
    //     container.style.cssText='width:80vw;'
    //   } else {
    //     container.style.cssText='width:56vw;'
    //   }
    //   console.log('山里导航栏的折叠',this.iscollapse);
    // })
  },
  methods: {
    init: function () {
      const container = document.getElementById('container')
      this.camera = new Three.PerspectiveCamera(60, container.clientWidth / container.clientHeight, 0.01, 10)
      this.camera.position.z = 1
      this.camera.position.x = 0.6
      this.camera.position.y = 0.6
      this.scene = new Three.Scene()
      this.scene.background = new Three.Color(0x89d0f1)
      var _this = this
      const objloader = new OBJLoader()
      objloader.load('static/hill.obj', function (obj) {
        obj.traverse((o) => {
          // 将图片作为纹理加载
          const explosionTexture = new Three.TextureLoader().load(
            'static/shanpi.jpg'
          )
          // 复制贴图
          explosionTexture.wrapS = Three.RepeatWrapping
          explosionTexture.wrapT = Three.RepeatWrapping
          // uv两个方向纹理重复数量
          explosionTexture.repeat.set(2, 2)
          // 此处不需要反转，当然也可以试试反转以后什么效果
          console.log(explosionTexture)
          explosionTexture.flipY = false
          // 将纹理图生成基础网格材质(meshBasicMaterial)
          const material = new Three.MeshBasicMaterial({
            map: explosionTexture
          })
          // 给模型每部分上材质
          obj.children[0].material = material
          // console.log(obj.children[0].material);
        })
        console.log(obj)
        // 查看加载器生成的材质对象：MeshPhongMaterial
        console.log(obj.children[0].material)
        // console.log('aaaaa',_this.scene);
        _this.scene.add(obj)
        // 加载后的一些编辑操作
        obj.children[0].scale.set(0.005, 0.005, 0.005)
        // 网格模型缩放
        obj.children[0].geometry.center()
        // 网格模型的几何体居中
      })
      // 添加灯光
      this.light = new Three.DirectionalLight(0x1e90ff, 1)
      this.light.position.set(100, 200, 100)
      this.light.position.multiplyScalar(0.3)
      this.scene.add(this.light)
      this.renderer = new Three.WebGLRenderer({ antialias: true })
      this.renderer.setSize(container.clientWidth, container.clientHeight)
      // 改变场景颜色
      // this.renderer.setClearColor(0x1677b3);
      container.appendChild(this.renderer.domElement)
    },
    animate: function () {
      requestAnimationFrame(this.animate)
      this.scene.rotation.y += 0.001
      this.renderer.render(this.scene, this.camera)
    },
    mouth: function () {
      var controls = new OrbitControls(this.camera, this.renderer.domElement)
      // 创建控件对象
      // 上下翻转的最大角度
      controls.maxPolarAngle = 1.2
      // 上下翻转的最小角度
      controls.minPolarAngle = 0.5
      // 是否允许缩放
      // controls.enableZoom = false
      controls.addEventListener('change', this.render)
      // 监听鼠标、键盘事件
    }
  },
  mounted () {
    this.init()
    this.animate()
    this.mouth()
  }
}
</script>
<style  lang="scss" scoped >
#container {
  display: flex;
  // top: 43vh;
  // left: 32%;
  margin: 0;
  //opacity: 0.6;
  height: 64vh;
  width: 37.6vw;
  position: fixed;
}
canvas {
 aspect-ratio: auto 1;
  // width: 100% !important;
  // height: 100% !important;
  // margin: 0;
  // float: left;
}
</style>
